import React, { Component } from 'react'
import { inject, observer } from 'mobx-react'

@inject('store')
@observer
class Home extends Component {

  state = {
    txt: ''
  }

  handleChange = (e) => {
    this.setState({
      txt: e.target.value
    })
  }

  handleClick = () => {
    console.log(this.props)
    this.props.store.add(this.state.txt)
  }

  render() {
    return (
      <div>
        <input type="text" onChange={this.handleChange} />
        <button onClick={this.handleClick}>添加</button>
        <ul>
          {
            this.props.store.todos.map((item, index) => {
              return <li key={index}>{item} &nbsp; <span onClick={()=>this.props.store.del(item)} >delete</span></li>
            })
          }
        </ul>
      </div>
    )
  }
}

export default Home;